工作忙碌ING 稍後補上

useEffect常見問題

useEffect（副作用），可以理解為我們在使用類組件時的生命週期函數
useEffect 可以實現我們在類組件中的componentDidMount、ComponentDidUpdate和componentWillUnmount的功能呢，只不過被合併成為一個API
與 componentDidMount 或 componentDidUpdate 不同的是，使用 useEffect 不會阻塞瀏覽器更新屏幕，這讓你的應用看起來響應更快。大多數情況下，effect 不需要同步地執行。在個別情況下（例如測量佈局），有單獨的 useLayoutEffect 供你使用，其 API 與 useEffect 相同。

useEffect 實現 componentDidMount及ComponentDidUpdate
直接使用useEffect傳入一個回調函數，會在組件初次渲染及每次更新渲染時執行

import React, { useState, useEffect } from 'react'

function Parent() {
  const [count, setCount] = useState(0)
  const handleAdd = () => setCount(count + 1)
  // 使用useEffect傳入一個回調函數使用類組件componentDidMount
  useEffect(() => {
    console.log('parent effect');
  })
  return (
    <div>
      parent, {count}
      <button onClick={handleAdd}>增加</button>
    </div>
  )
}

export default Parent